'use client'
import { Button, Card, Checkbox, Divider, Form, Image, Input, Modal, Typography, message } from 'antd'
//只有客户端组件才能使用useRouter进行跳转
// rnf：创建一个RN组件
// rfc：创建普通的基于Web浏览器的组件
// import { useRouter } from 'next/router'
import { useRouter } from 'next/navigation'
import React from 'react'
import style from './page.module.css'
import { adminLogin } from '@/service'


export default function Login() {
  //创建路由器对象，用于页面跳转
  let router = useRouter()
  //处理“表单提交”事件
  let doLogin = async (values)=>{
    //console.log('正在提交表单内容：', values)
    //根据用户是否勾选了“记住登录信息”来决定是否在客户端缓存用户的登录信息
    if(values.remember){    //用户勾选了“记住登录信息”
      //localStorage.setItem('adminName', values.adminName)
      localStorage['adminName'] = values.adminName    //客户端缓存中保存登录信息
      localStorage['adminPwd'] = values.adminPwd
      localStorage['remember'] = values.remember
    }else {                 //用户没有或取消勾选了“记住登录信息”
      //localStorage.removeItem('adminName')
      delete  localStorage['adminName']               //客户端缓存中删除登录信息
      delete  localStorage['adminPwd']       
      delete  localStorage['remember']       
      //delete是JS关键字，用于删除对象的属性，或者数组中的成员
    }
    //异步请求服务器端接口，开始进行登录验证
    let data = await adminLogin(values.adminName, values.adminPwd)
    if(data.code===2000){       //登录成功
      //1.弹出“欢迎回来”吐司对话框
      message.success('欢迎回来：'+values.adminName)
      //2.在客户端缓存中保存用户身份令牌
      localStorage['adminToken'] = data.token
      //3.跳转到主页面
      router.replace('/admin')
    }else {                     //登录失败
      //1.弹出“登录失败”模态对话框
      Modal.error({
        title: '错误',
        content: '登录失败！服务器返回错误消息：'+data.msg,
        centered: true,       //是否在屏幕中竖直居中
        okText: '确定'        //OK按钮上的文本
      })
    }
  }
  return (
    <div className={style.page}>
      {/* 标题字 */}
      <Typography.Title level={2} style={{ color: '#fff', textAlign: 'center', paddingTop: '150px' }}>天通苑智慧社区后台管理系统</Typography.Title>
      {/* 卡片  */}
      <Card style={{ width: '600px', margin: '30px auto 0' }}>
        <div style={{ display: 'flex' }}>
          {/* 卡片内部-左侧：大图片 */}
          {/* preview：是否开启图片预览功能 */}
          <Image width={220} preview={false} src='/img/ring.jpg' />
          {/* 卡片内部-中间：分割线 */}
          <Divider type='vertical' style={{ height: '220px', background: '#3F9BDE' }} />
          {/* 卡片内部-右侧：表单  */}
          {/* labelCol：指定标签文字所在的列的特征   span：宽度跨越24份中的几份   offset：向右偏移几份 */}
          {/* wrapperCol：指定包裹输入域的列的特征   span   offset*/}
          {/* initialValues：表单输入域的初始值 */}
          <Form style={{flex:1, paddingTop:'15px'}} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}  onFinish={doLogin} initialValues={{
            //adminName: localStorage.getItem('adminName')
            adminName: localStorage['adminName'],//管理员名的初始值
            adminPwd: localStorage['adminPwd'],  //管理员密码的初始值
            remember: localStorage['remember'],  //是否记住登录信息的初始值
          }}>
            {/* 表单项1：管理员名输入框 */}
            {/* rules：表单输入域的校验规则 */}
            <Form.Item label="管理员名" name="adminName" rules={[{
                required: true,     //必填的，即输入域不能为空
                message:'管理员登录名不能为空'      //违反规则后的提示消息
            }]}>
              <Input placeholder='请输入管理员登录名'/>
            </Form.Item>
            {/* 表单项2：管理员密码输入框 */}
            <Form.Item label="登录密码" name="adminPwd" rules={[{required:true, message: '登录密码不能为空'}]}>
              <Input.Password placeholder='请输入登录密码'/>
            </Form.Item>
            {/* 表单项3：记住登录信息复选框 */}
            {/* valuePropName：选择Checkbox的哪个属性名作为要提交的值，可选项：checked或value */}
            <Form.Item name="remember" wrapperCol={{offset:6}} valuePropName='checked'>
              <Checkbox>记住登录信息</Checkbox>
            </Form.Item>
            {/* 表单项4：提交按钮 */}
            <Form.Item wrapperCol={{offset:6}}>
              <Button type="primary" htmlType="submit">提交登录信息</Button>
            </Form.Item>
          </Form>
        </div>
      </Card>
    </div>
  )
}
